<template>
  <div>
    <el-card>
      <el-button @click="formBtn">
        点我
      </el-button>
      <wang-title
        sub-title="申请人基本信息"
        red-title="【输入证件号可查相关信息】"
        width-size="340px"
      >
        <wang-form
          ref="modelsTwo"
          keys="wangFormTwo"
          :wang-form="wangFormTwo"
          :models="modelsTwo"
        />
      </wang-title>
    </el-card>
    <create-form ref="createForm" />
  </div>
</template>

<script>
import CreateForm from './modules/CreateForm.vue'
export default {
  components: { CreateForm },
  data() {
    return {
      modelsTwo: {},
      wangFormTwo: {
        list: [
          {
            type: 'Input',
            options: {
              defaultValue: '',
              placeholder: '请输入',
              clearable: true,
              type: 'text',
              showWordLimit: true,
              showPassword: false,
              disabled: false,
              size: 'medium',
              width: '120%',
              onChange: (val) => {
                if (val) {
                  this.readBtn()
                }
              }
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '证件号',
            span: 6,
            model: 'idNumber',
            key: 'idNumber',
            rules: [
              { required: true, message: '请输入证件号', trigger: 'change' }
            ]
          },
          {
            type: 'select',
            options: {
              defaultValue: '',
              placeholder: '请输入',
              options: [],
              props: {
                value: 'value',
                label: 'label'
              },
              multiple: false,
              disabled: false,
              size: 'medium',
              clearable: true,
              width: '120%'
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '证件类型',
            span: 6,
            model: 'documentType',
            key: 'documentType',
            rules: []
          },
          {
            type: 'Input',
            options: {
              defaultValue: '',
              placeholder: '请输入',
              clearable: true,
              type: 'text',
              showWordLimit: true,
              showPassword: false,
              disabled: false,
              size: 'medium',
              width: '120%'
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '申请人',
            span: 6,
            model: 'applicantName',
            key: 'applicantName',
            rules: [{ required: true, message: '请输入', trigger: 'blur' }]
          },
          {
            type: 'select',
            options: {
              defaultValue: '',
              placeholder: '请输入',
              options: [],
              multiple: false,
              disabled: false,
              size: 'medium',
              clearable: true,
              width: '100%',
              props: {
                value: 'value',
                label: 'label'
              }
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '性别',
            span: 6,
            model: 'sex',
            key: 'sex',
            rules: []
          },
          {
            type: 'DatePicker',
            options: {
              valueFormat: 'yyyy-MM-dd',
              defaultValue: '',
              placeholder: '请选择出生日期',
              onChange: (e) => {},
              disabled: false,
              width: '120%'
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '出生日期',
            span: 6,
            model: 'birthTime',
            key: 'birthTime',
            rules: []
          },
          {
            type: 'select',
            options: {
              defaultValue: '',
              placeholder: '请输入',
              options: [],
              multiple: false,
              disabled: false,
              size: 'medium',
              clearable: true,
              width: '120%',
              props: {
                value: 'value',
                label: 'label'
              }
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '民族',
            span: 6,
            model: 'ethnicGroup',
            key: 'ethnicGroup',
            rules: []
          },
          {
            type: 'Input',
            options: {
              defaultValue: '',
              placeholder: '请输入',
              clearable: true,
              type: 'text',
              showWordLimit: true,
              showPassword: false,
              disabled: false,
              size: 'medium',
              width: '120%'
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '法定代理人',
            span: 6,
            model: 'agentName',
            key: 'agentName',
            rules: []
          },
          {
            type: 'select',
            options: {
              defaultValue: '',
              placeholder: '请输入',
              options: [],
              multiple: false,
              disabled: false,
              size: 'medium',
              clearable: true,
              width: '100%',
              props: {
                value: 'value',
                label: 'label'
              }
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '婚姻状况',
            span: 6,
            model: 'maritalStatus',
            key: 'maritalStatus',
            rules: []
          },
          {
            type: 'Input',
            options: {
              defaultValue: '',
              placeholder: '请输入',
              clearable: true,
              type: 'text',
              showWordLimit: true,
              showPassword: false,
              disabled: false,
              size: 'medium',
              width: '120%'
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '联系电话',
            span: 6,
            model: 'iphone',
            key: 'iphone',
            rules: []
          },
          {
            type: 'select',
            options: {
              defaultValue: '',
              placeholder: '请输入',
              options: [],
              multiple: false,
              disabled: false,
              size: 'medium',
              clearable: true,
              width: '120%',
              props: {
                value: 'value',
                label: 'label'
              }
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '文化程度',
            span: 6,
            model: 'degree',
            key: 'degree',
            rules: []
          },
          {
            type: 'select',
            options: {
              defaultValue: '',
              placeholder: '请输入',
              options: [],
              multiple: false,
              disabled: false,
              size: 'medium',
              clearable: true,
              width: '120%',
              props: {
                value: 'value',
                label: 'label'
              }
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '身体状况',
            span: 6,
            model: 'physicalCondition',
            key: 'physicalCondition',
            rules: []
          },
          {
            type: 'select',
            options: {
              defaultValue: '',
              placeholder: '请输入',
              options: [],
              multiple: false,
              disabled: false,
              size: 'medium',
              clearable: true,
              width: '100%',
              props: {
                value: 'value',
                label: 'label'
              }
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '职业',
            span: 6,
            model: 'occupation',
            key: 'occupation',
            rules: []
          },
          {
            type: 'cascader',
            options: {
              defaultValue: [],
              placeholder: '请选择',
              class: 'cascaders',
              options: [],
              props: {
                children: 'children',
                value: 'id',
                label: 'name',
                checkStrictly: true
              },
              filterable: true,
              size: '',
              disabled: false,
              clearable: false,
              separator: '/',
              width: '120%'
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '省市区',
            span: 6,
            model: 'cascader',
            key: 'cascader',
            rules: []
          },
          {
            type: 'Input',
            options: {
              defaultValue: '',
              placeholder: '请输入',
              clearable: true,
              type: 'textarea',
              showWordLimit: true,
              showPassword: false,
              disabled: false,
              size: 'medium'
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '户籍所在地',
            span: 24,
            model: 'censusRegister',
            key: 'censusRegister',
            rules: []
          },
          {
            type: 'Input',
            options: {
              defaultValue: '',
              placeholder: '请输入',
              clearable: true,
              type: 'textarea',
              showWordLimit: true,
              showPassword: false,
              disabled: false,
              size: 'medium'
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '工作单位',
            span: 24,
            model: 'workplace',
            key: 'workplace',
            rules: []
          },
          {
            type: 'Input',
            options: {
              defaultValue: '',
              placeholder: '请输入',
              clearable: true,
              type: 'textarea',
              showWordLimit: true,
              showPassword: false,
              disabled: false,
              size: 'medium'
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '住所地址',
            span: 24,
            model: 'address',
            key: 'address',
            rules: []
          },
          {
            type: 'Input',
            options: {
              defaultValue: '',
              placeholder: '请输入',
              clearable: true,
              type: 'textarea',
              showWordLimit: true,
              showPassword: false,
              disabled: false,
              size: 'medium'
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '羁押地',
            span: 24,
            model: 'custodyPlace',
            key: 'custodyPlace',
            rules: []
          },
          {
            type: 'checkbox',
            options: {
              optionsLabel: 'typeName',
              optionsValue: 'typeId',
              defaultValue: [], // 当前值数组为多选，字符串为全选
              placeholder: '请输入',
              options: [],
              onChange: (e) => {},
              checkboxGroup: {
                disabled: false, // 禁用 优先级高于checkbox
                size: '' // 大小 优先级高于checkbox
                // min:1, // 最少选1
                // max:2, // 最多选2
              },
              checkbox: {
                button: false,
                disabled: false,
                border: false,
                size: 'medium'
              }
            },
            formItemStyle: {
              size: 'medium'
            },
            label: '人群类别',
            span: 24,
            model: 'applicationTypeIds',
            key: 'applicationTypeIds',
            rules: []
          }
        ],
        config: {
          labelPosition: 'right',
          labelWidth: '110px',
          size: 'mini',
          outputHidden: true,
          hideRequiredMark: false,
          syncLabelRequired: false,
          customStyle: ''
        },
        rowStyle: {
          gutter: 24
        }
      }
    }
  },
  methods: {
    formBtn() {
      this.$refs.createForm.handleOpen()
    }
  }
}
</script>

<style>

</style>
